import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, PixelRatio, Image } from 'react-native';
import { style } from '../../../theme/style';
import { GLOBAL } from '../../../config/global';
const scale = GLOBAL.SCALE;

export class BottomCpt extends Component {
	constructor(props) {
		super(props);
	}

	render() {
		let { btnData, priceData, totalGrossProfitAmtActive, isSssociated } = this.props.data || {};
		let { data, isProfit, isC } = priceData || {};
		let { orderPriceInfo, orderPriceItemList } = data || {};
		let { totalOrderAmt, displayTotalOrderAmt, totalOrderQuantity, totalGrossProfitAmt } = orderPriceInfo || {};
		console.log('1111-btnData', btnData, '2222-priceData', priceData)
		return (
			<View style={styles.box}>
				<View style={[styles.pl15, { flex: 1 }]}>
					<View style={styles.row}>
						<Text style={styles.totalText}>合计:</Text>
						<View style={styles.m20}>
							<TouchableOpacity onPress={() => { priceData.callback && priceData.callback() }} style={[styles.row, styles.alignItems, styles.domain]}>
								<Text style={styles.total}>{displayTotalOrderAmt || 0}万</Text>
								<Text style={styles.priceDetail}>价格明细</Text>
								<Image style={styles.more} source={require('../../../imgs/global/down.png')} />
							</TouchableOpacity>
							<Text style={[styles.priceInfo, isProfit ? { marginLeft: -35 * scale } : null]}>商品 {orderPriceItemList && orderPriceItemList.length || 0} 件，总量 {totalOrderQuantity || 0} 吨 {isProfit ? <Text>,毛利:{(isSssociated ? (totalGrossProfitAmtActive || 0).toFixed(2) : (totalGrossProfitAmt || 0).toFixed(2)) || 0} 元 </Text> : null}</Text>
						</View>
					</View>
				</View>
				<View style={[styles.btnBox, styles.pr15]}>
					{
						btnData && btnData.map((item, index) => {
							return <TouchableOpacity key={index} style={[styles.btnPre, index || item.btnPreActive ? styles.btnPreActive : null]} onPress={item.callback}>
								<Text style={[styles.btnText, index || item.btnPreActive ? styles.btnTextActive : null]}>{item.text}</Text>
							</TouchableOpacity>
						})
					}
				</View>
			</View >)
	}
}

const styles = StyleSheet.create({
	box: {
		width: 375 * scale,
		height: 80 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		position: 'absolute',
		bottom: 15 * scale,
		left: 0,
		bottom: 0,
		backgroundColor: style.color.white
	},
	pl15: {
		paddingLeft: 15 * scale,
	},
	pr15: {
		paddingRight: 15 * scale,
	},
	btnBox: {
		flexDirection: 'row',
		justifyContent: 'space-around'
	},
	btnPre: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		width: 66 * scale,
		height: 28 * scale,
		borderColor: style.color.themeColor,
		borderWidth: 1 / PixelRatio.get(),
		borderRadius: 14 * scale,
	},
	btnPreActive: {
		backgroundColor: style.color.themeColor,
		marginLeft: 10 * scale
	},
	btnText: {
		fontSize: 12 * scale,
		color: style.color.themeColor
	},
	btnTextActive: {
		color: style.color.white
	},
	total: {
		fontSize: 14 * scale,
		fontWeight: 'bold',
		color: style.color.orange
	},
	row: {
		flexDirection: 'row',
		//justifyContent: 'center'
	},
	alignItems: {
		alignItems: 'center',
	},
	priceInfo: {
		fontSize: 11 * scale,
		paddingTop: 5 * scale,
		width: 200 * scale
	},
	priceDetail: {
		fontSize: 10 * scale,
		color: style.color.orange,
		paddingLeft: 3 * scale,
		paddingRight: 5 * scale
	},
	more: {
		width: 13 * scale,
		height: 7 * scale,
		tintColor: style.color.orange,
		transform: [{ rotateX: '180deg' }]
	},
	domain: {
		paddingBottom: 5 * scale,
		paddingRight: 20 * scale
	},
	totalText: {
		fontSize: 14 * scale,
	},
	m20: {
		marginLeft: 5 * scale
	}
})